<template>
    <div v-if="shopArr.length == 0">
        <el-empty>

            <template #description>您还没有店铺，点击按钮添加</template>
            <el-button type="primary" @click="$router.push('/addShop')">
                添加店铺
            </el-button>
        </el-empty>
    </div>
    <div v-else class="box">
        <el-card>
            <template #header>
                <el-link>{{ businessInfo.contact }} 您的店铺列表</el-link>
                <el-button type="primary" @click="$router.push('/addShop')">
                    添加店铺
                </el-button>
            </template>
            <div class="shop-list">
                <el-card class="shop-card" v-for="item in shopArr" :key="item.shopId">
                    <template #header>
                        <!-- 店铺名称 -->
                        <h3 type="primary">{{ item.shopName }}</h3>
                        <div>
                            <el-button type="primary" @click="gotoFoodCategory(item.shopId)" v-if="item.status != 0">
                                查询菜品分类
                            </el-button>
                            <el-button type="danger">修改</el-button>
                            <el-button type="primary" v-if="item.status == 2">休息</el-button>
                            <el-button type="success" v-else-if="item.status == 3 || item.status == 1">
                                营业
                            </el-button>
                            <el-button type="success" v-else-if="item.status == 4">
                                整改
                            </el-button>
                        </div>
                    </template>
                    <div>
                        <!-- 店铺的图片 -->
                        <div class="imgbox"><img :src="item.shopImg" alt="" style="height: 150px;" /></div>
                        <el-descriptions class="margin-top" :column="1" border>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺介绍</div>
                                </template>
                                {{ item.shopExplain }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺地址</div>
                                </template>
                                {{ item.shopAddress }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">起送费</div>
                                </template>
                                {{ item.startPrice }} 元
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">配送费</div>
                                </template>
                                {{ item.deliveryPrice }} 元
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">营业时间</div>
                                </template>
                                {{ item.startTime }} - {{ item.endTime }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">店铺状态</div>
                                </template>
                                <el-tag v-if="item.status == 0" type="danger">未审核</el-tag>
                                <el-tag v-else-if="item.status == 1" type="success">
                                    已审核
                                </el-tag>
                                <el-tag v-else-if="item.status == 2" type="primary">
                                    营业
                                </el-tag>
                                <el-tag v-else-if="item.status == 3" type="info">歇业</el-tag>
                                <el-tag v-else-if="item.status == 4" type="warning">
                                    违规
                                </el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-card>
            </div>
            <template #footer>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 10]" layout="total, sizes,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </el-card>
    </div>
</template>

<script>
import { shopListAPI } from "@/api/shop";
export default {
    data() {
        return {
            // 分页的参数:
            currentPage: 1,
            pageSize: 2,
            total: 0,
            //商家的店铺数组
            shopArr: [],
            businessInfo: {},
        };
    },
    methods: {
        // 点击添加菜品分类按钮
        gotoFoodCategory(shopId) {
            // 跳转到添加菜品分类的页面
            this.$router.push({
                path: "/foodCategory",
                query: {
                    shopId,
                },
            });
        },
        handleSizeChange() {
            this.loadShopList();
        },
        handleCurrentChange() {
            this.loadShopList();
        },
        loadShopList() {
            shopListAPI({
                businessId: this.businessInfo.id,
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            }).then((resp) => {
                this.total = resp.data.total;
                this.shopArr = resp.data.datas;
            });
        },
    },
    created() {
        // 从本地存储中获取商家登录的信息
        let info = localStorage.getItem("businessInfo");
        if (!info) {
            // 从本地存储中没有获取到商家的信息，说明商家没有登录，踢回登录页面上
            this.$router.push("/businessLogin");
            return;
        }
        this.businessInfo = JSON.parse(info);
        this.loadShopList();
    },
}
</script>

<style scoped>
.shop-list {
    display: flex;
    justify-content: space-around;
}

.shop-card {
    width: 45%;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: space-between;
}

.imgbox {
    display: flex;
    width: 100%;
    justify-content: center;
}
</style>